<template>
  <div>
    <operation-title
      title="热区"
      :icon="TitleIcon"
    />
    <div class="divider"></div>
    <div class="func">
      <h4>建议图片宽度750，高度200-950，支持jpg、png。</h4>
      <ul class="add-item">
        <li>
          <div class="upload-img" v-if="config.pageConfig.imgUrl">
            <el-image style="width: 100%; height: 100%" :src="config.pageConfig.imgUrl" fit="contain"></el-image>
            <div class="upload-img_cover">
              <Upload :model-value="fileList" file-path="actapp/" :limit="999" :show-file-list="false"
                @success="uploadSuccess">
                <el-button size="small">替换</el-button>
              </Upload>
            </div>
          </div>
          <Upload v-else v-model="config.pageConfig.imgUrl" file-path="actapp/" list-type="picture-card">
            <el-icon>
              <Plus />
            </el-icon>
          </Upload>
        </li>
        <li class="extra-li" @click="openHotDialog">
          <p>设置热区</p>
        </li>
      </ul>
    </div>
    <div class="divider"></div>
    <div class="func">
      <p class="attr">颜色选择</p>
      <div class="adjust-item">
        <span>背景色</span>
        <el-color-picker v-model="config.pageConfig.color" />
        <span>{{ config.pageConfig.color }}</span>
      </div>
    </div>
    <div class="divider"></div>
    <div class="func">
      <p class="attr">边距</p>
      <div class="adjust-item">
        <span>上边距</span>
        <el-slider v-model="config.pageConfig.marginTop" :min="0" :max="50" show-input size="small" />px
      </div>
      <div class="adjust-item">
        <span>下边距</span>
        <el-slider v-model="config.pageConfig.marginBottom" :min="0" :max="50" show-input size="small" />px
      </div>
      <div class="adjust-item">
        <span>左右边距</span>
        <el-slider v-model="config.pageConfig.margin" :min="0" :max="20" show-input size="small" />px
      </div>
    </div>
    <div class="divider"></div>
    <div class="func">
      <p class="attr">圆角设置</p>
      <div class="adjust-item">
        <span>上圆角</span>
        <el-slider :min="0" :max="20" v-model="config.pageConfig.radiusTop" show-input size="small" />px
      </div>
      <div class="adjust-item">
        <span>下圆角</span>
        <el-slider :min="0" :max="20" v-model="config.pageConfig.radiusBottom" show-input size="small" />px
      </div>
    </div>
    <div class="divider"></div>
    <el-dialog class="dialog-form" v-model="hotDialogShow" title="热区编辑器" width="60%">
      <div class="goods-div-container">
        <el-steps>
          <el-step title="添加热区" />
          <el-step title="调整热区大小及位置" />
          <el-step title="设置热区链接" />
          <el-step title="保存设置" />
        </el-steps>
        <div class="hotapp">
          <hotspot :image="config.pageConfig.imgUrl" :zonesInit="zones" :types="types" :minSize="52" :switchOptions="{
            isShowSign: true,
            isShowDelete: true,
            isOverlap: false,
            isShowActive: true
          }" :styleOptions="{}" @add="handleAdd">
          </hotspot>
          <div class="hotapp__display">
            <div v-for="(zone, index) in zones" :key="index" class="hotarea-div">
              <p>热区{{ index + 1 }}</p>
              <div class="link-div" @click="linkDialog(zone, index)">
                <el-icon>
                  <Link />
                </el-icon>
                <span v-if="zone.url">{{ zone.urlName }}</span>
                <span v-else>请选择链接</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleAdd">添加热区</el-button>
          <el-button @click="submitForm()" type="primary">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <href-selector v-model:show="linkFormVisible" :model-value="linkObject" @confirm="confirmLink" />
  </div>
</template>

<script lang="ts">
import Hotspot from "hotspot-vue3";
import { useHrefSelector } from "@/views/activity/actApp/components/default/compositions/useHrefSelector";
export default {
  name: "HotOperation",
  components: {
    Hotspot,
  }
};
type MoreUrl = {
  [key in string | number]: string;
};
interface ZoneType {
  topPer: number;
  leftPer: number;
  widthPer: number;
  heightPer: number;
  url?: string | MoreUrl;
  urlType?: string;
  urlName?: string;
  active?: boolean;
  key?: string;
}
</script>
<script lang="ts" setup>
import { reactive, onMounted } from "vue";
import TitleIcon from "@/assets/app/icon/hotspot.png";
import OperationTitle
  from "@/views/activity/actApp/components/default/operationComponents/operationTitle/OperationTitle.vue";
const zones = ref([] as ZoneType[]);
const types = ref("move");


const config = defineProps({
  pageConfig: {
    type: Object,
    default: {
      color: "",
      marginTop: 0,
      marginBottom: 0,
      marginImg: 5,
      margin: 0,
      radiusTop: 0,
      radiusBottom: 0,
      imgUrl: "./imagesStatic/default_banner.png",
      zones: []
    },
  },
});
const fileList = ref([]);
const hotDialogShow = ref(false);
const submitForm = () => {
  console.log(zones.value)
  let flag = true
  zones.value.forEach(i => {
    if (!i.url) {
      flag = false
    }
  })
  if (flag) {
    config.pageConfig.zones = zones.value
    hotDialogShow.value = false
  } else {
    ElMessage.error("请填写热区链接");
  }
}
let emits = defineEmits<{ (e: "changeStyle", configStyle: Object): void }>();
const uploadSuccess = (value: any) => {
  config.pageConfig.imgUrl = value.url;
};
const handleAdd = (zon: ZoneType) => {
  let zone: ZoneType;
  if (zon.topPer) {
    // 存在此参数,则通过拖动创建热区
    zone = zon;
    zone.url = "";
    zone.urlType = "";
    zone.urlName = "";
    types.value = "move"; // 存在max热区时，验证通过拖动或点击达到max
  } else {
    //通过按钮创建热区
    zone = {
      heightPer: 0.2027, //20.27%
      leftPer: 0.2027,
      topPer: 0.2027,
      widthPer: 0.1027,
      url: "",
      urlType: '',
      urlName: '',
      key: String(Math.random())
    } as ZoneType;
    types.value = "btn"; // 存在max热区时，验证通过拖动或点击达到max
  }
  zones.value.push(zone); // 热区数据
}
// let linkIndex = 0;
// const linkFormVisible = ref(false);
// const linkObject = ref({
//   linkUrl: '',
//   linkName: '',
//   linkType: '',
//   linkHttpUrl: ''
// });

const { linkFormVisible, linkIndex, linkObject, submitUrl, linkDialog } = useHrefSelector();

// const submitUrl = (content: any) => {
//   zones.value[linkIndex].url = content.url;
//   zones.value[linkIndex].urlName = content.urlName;
//   zones.value[linkIndex].urlType = content.urlType;
//   linkFormVisible.value = false
// };
const onClose = () => {
  linkFormVisible.value = false
};
// const linkDialog = (item: any, idx: number) => {
//   linkIndex = idx;
//   if (item.urlType == 'link') {
//     linkObject.value.linkHttpUrl = item.url;
//     linkObject.value.linkUrl = '';
//     linkObject.value.linkName = item.urlName;
//     linkObject.value.linkType = item.urlType;
//   } else {
//     linkObject.value.linkHttpUrl = '';
//     linkObject.value.linkUrl = item.url;
//     linkObject.value.linkName = item.urlName;
//     linkObject.value.linkType = item.urlType;
//   }
//   linkFormVisible.value = true;
// };

const confirmLink = (link: any) => {
  zones.value[linkIndex.value].url = link.url
  zones.value[linkIndex.value].urlName = link.urlName
  zones.value[linkIndex.value].urlType = link.urlType
  submitUrl(link, zones.value[linkIndex.value])
}
watch(config, (val) => {
  emits("changeStyle", config.pageConfig);
});

const openHotDialog = () => {
  hotDialogShow.value = true
  let zone = {
    heightPer: 0.2027, //20.27%
    leftPer: 0.2027,
    topPer: 0.2027,
    widthPer: 0.1027,
    url: "",
    urlType: '',
    urlName: '',
    key: String(Math.random())
  }
  //默认添加一个
  if (!zones.value.length) {
    zones.value.push(zone)
  }
}
onMounted(() => {
  zones.value = config.pageConfig.zones
})
</script>

<style lang="scss" scoped>
.title {
  padding: 8px 23px;
  overflow: hidden;
  border-bottom: 5px solid #f6f7f9;
  display: flex;
  position: relative;
  height: 50px;
  box-sizing: border-box;

  img {
    position: absolute;
    left: 0;
    top: -5px;
  }

  h5 {
    font-size: 16px;
    font-weight: 700;
    position: absolute;
    left: 70px;
    top: 0;
    line-height: 50px;
  }
}

.func {
  border-bottom: 5px solid #f6f7f9;
  padding: 20px 16px;
  font-size: 16px;

  .attr {
    line-height: 1;
    color: #47565d;
    font-weight: bolder;
    margin-bottom: 20px;
  }

  ul.common-ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;

    li {
      flex: 1;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px 0 0 4px;
      border: 2px solid #ededed;
      border-collapse: collapse;

      &.active {
        border: 2px solid #fb6638;
      }

      img {
        max-width: 100% !important;
        max-height: 100% !important;
      }
    }
  }

  h4 {
    position: relative;
    padding: 8px 16px 8px 16px;
    border-radius: 6px;
    color: red;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 10px;
    border: 1px solid #d8e8fc;
    background-color: #e5f0fe;
  }

  div.adjust-item {
    display: flex;
    align-items: center;
    margin-top: 3px;
    margin-bottom: 10px;

    span {
      width: 64px;
      text-align: right;
      margin-right: 15px;
      color: #666;
    }

    :deep(.el-slider) {
      width: 240px;
      margin-right: 3px;
      margin-left: 15px;
    }

    :deep(.el-slider__runway.show-input) {
      margin-right: 15px;
    }

    :deep(.el-input-number) {
      width: 100px;
      background: #f4f3f7;
      border: 1px solid #f4f3f7;
    }
  }

  .add-item {
    width: 100%;

    li {
      background: #f4f3f7;
      border-radius: 4px;
      padding: 10px 20px 10px 10px;
      color: #999;
      margin-top: 10px;
      margin-bottom: 20px;
      position: relative;
      display: flex;

      &.extra-li {
        justify-content: center;
      }

      .upload-img {
        width: 100%;
        height: 100%;
        border: 1px dashed #ededed;
        text-align: center;
        color: #dad9d9;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        float: left;
        position: relative;

        :deep(.el-image) {
          width: 100%;
          height: 100%;
        }

        &:hover {
          .upload-img_cover {
            opacity: 1;
          }
        }

        .upload-img_cover {
          opacity: 0;
          position: absolute;
          transition: all 0.3s ease;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.7);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;
        }
      }

      :deep(.el-upload-list) {
        width: 50px;
        height: 50px;
        margin-right: 10px;
      }

      :deep(.el-upload--picture-card) {
        width: 50px;
        height: 50px;
      }

      .link-div {
        padding: 4px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        background: #e8effc;
        border: 0;
        padding-left: 16px;
        cursor: pointer;
        position: relative;

        :deep(.el-icon) {
          margin-right: 10px;
        }

        :deep(.el-input) {
          font-size: 12px;
          height: 30px;
          width: calc(100% - 30px);
        }

        .close-btn {
          position: absolute;
          right: 5px;
        }
      }

      .sure-close {
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer;
      }
    }
  }
}

:deep(.el-radio__label) {
  font-size: 16px;
}

.hotapp {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 450px;

  :deep(.hotspot-wrap) {
    width: 100% !important;
    height: 100%;

    img {
      display: inline-flex !important; //展示热区图片
      width: 100%;
      height: 100%;
    }
  }

  &__display {
    margin-top: 10px;

    .hotarea-div {
      width: 600px;
      display: flex;
      height: 30px;
      line-height: 30px;
      margin-bottom: 10px;

      :deep(.el-input) {
        width: 300px;
        margin-left: 10px;
      }
    }

  }
}


.link-div {
  margin-left: 10px;
  width: calc(100% - 80px);
  display: flex;
  align-items: center;
  background: #e8effc;
  border: 0;
  padding-left: 16px;
  cursor: pointer;
  position: relative;

  :deep(.el-icon) {
    margin-right: 10px;
  }

  :deep(.el-input) {
    font-size: 12px;
    height: 30px;
    width: calc(100% - 30px);
  }

  .close-btn {
    position: absolute;
    right: 5px;
  }
}
</style>
